<template>
  <div class="ucenter-container">
    <el-tabs v-model="activeName" stretch class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="账号管理" name="first">
        <AccountManageView />
      </el-tab-pane>
      <el-tab-pane label="我的报告" name="second">
        <MyRportView />
      </el-tab-pane>
      <el-tab-pane label="用户协议" name="third">用户协议</el-tab-pane>
      <el-tab-pane label="问题反馈" name="fourth">
        <FeedbackView />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">

import { ref, reactive } from "vue"
import AccountManageView from "./AccountManageView.vue"
import MyRportView from "./MyReportView.vue"
import FeedbackView from "./FeedbackView.vue";

const activeName = ref('first')

const handleClick = () =>{
  
}


</script>
<style lang="less" scoped>
.ucenter-container {
  // height: calc(100vh - 115px);
  background-color: #fff;
  padding: 20px 40px;

  :deep(.el-tabs__header) {
    width: 60%;

    .el-tabs__nav-wrap:after {
      height: 0;
    }
  }

  :deep(.el-tabs__content) {
    padding-top: 10px;
    border-top: 1px solid #f3f4f5;
  }

  :deep(.el-cascader) {
    width: 100%;
  }

  :deep(.el-form-item__content) {
    justify-content: center;
  }
}
</style>
